<template>
    <div>
        <div class="demo-image">
            <div v-for="(item,index) in list" :key="index" class="block">
                <el-image style="width: 300px; height: 300px" :src=item.img fit="cover" />
                <span class="demonstration hidden" :title="item.name">{{ item.name }}</span>
                <el-row>
                    <el-col :span="10" class="demonstration">￥{{ item.price }}</el-col>
                    <el-col :span="4"><el-icon @click="routerClick(item.id)"><View /></el-icon></el-col>
                    <el-col :span="4"><el-icon @click="cartAdd(item.id)"><ShoppingCart /></el-icon></el-col>
                    <el-col :span="4"><el-icon @click="orderAdd(item.id)"><GoodsFilled /></el-icon></el-col>
                    <el-col :span="2"></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { ElMessageBox } from 'element-plus';
import { userGoodsStore } from '../store/good.js'
import { View, ShoppingCart, GoodsFilled } from '@element-plus/icons-vue/dist';
// import router from '@/router';

export default{
    props:['list'],
    data() {
        return {
            data:[],
            store:userGoodsStore(),
            time: new Date()
        }
    },
    components:{
        View,
        ShoppingCart,
        GoodsFilled,
    },
    methods:{
        routerClick(val) {
            this.data = this.list.find(e => e.id == val)
            this.$router.push({path:'/detail',query:this.data})        
        },
        cartAdd(val) {
            if (sessionStorage.getItem('username') === '游客') {
                this.$router.push('/login')
            } else {
                ElMessageBox.alert('您成功添加至购物车', '温馨提示', {confirmButtonText: 'OK',});
                this.data = this.list.find(e => e.id == val)
                this.store.cartAdd({
                    id:this.data.id,
                    name:this.data.name,
                    price:this.data.price,
                    onlineprice:this.data.onlineprice,
                    num:1,
                    total:this.data.onlineprice
                })
            }
            
        },
        orderAdd(val) {
            if (sessionStorage.getItem('username') === '游客') {
                this.$router.push('/login')
            } else {
                ElMessageBox.alert('您已加入订单，请前往订单页进行付款', '温馨提示', {confirmButtonText: 'OK',});
                this.data = this.list.find(e => e.id == val)
                console.log(this.data)
                this.data.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() + this.time.getDate().toString() + Math.random().toString().slice(2,10)
            // console.log(this.data.orderID)
            
                //把相关的数据添加到store中的订单
                this.store.orderAdd({
                    orderID:this.data.orderID,
                    time:this.time,
                    num:1,
                    sum:this.data.price,
                    isOrdered:false, //记录是否完成支付
                    child:[
                        {
                            id:this.data.id,
                            name:this.data.name,
                            price:this.data.price,
                            onlineprice:this.data.onlineprice,
                            num:1,
                            total:this.data.onlineprice
                        }
                    ],
                })
                //过程性
                console.log(this.store.orderData)
                }
        }
    }
}
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.hidden{
    margin: 0 auto;
    width: 200px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    /* -webkit-line-clamp: 1; */
    -webkit-box-orient: vertical;
}
</style>